<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/own.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"  media="all">
    <script th:src="@{/echarts/echarts.min.js}"></script>
    <script th:src="@{axios.js}"></script>
    <script th:src="@{vue.js}"></script>
</head>
<body>
<!--左侧-->
<div class="left" >
   <table border="1" class="table" id="userInfo">
       <caption>个人数据</caption>
       <tr>
           <td>姓名</td>
           <td>{{username}}</td>
       </tr>
       <tr>
           <td>性别</td>
           <td>{{sex}}</td>
       </tr>
       <tr>
           <td>体重</td>
           <td>{{body_weight}}kg</td>
       </tr>
       <tr>
           <td>身高</td>
           <td>{{body_height}}cm</td>
       </tr>
       <tr>
           <td>心率</td>
           <td>{{heart_rate}}</td>
       </tr>
       <tr>
           <td>血压</td>
           <td>{{blood_pressure}}</td>
       </tr>
       <tr>
           <td>体温</td>
           <td>{{body_temperature}}.5</td>
       </tr>
       <tr>
           <td>身体状态</td>
           <td>{{healthiffo}}</td>
       </tr>
   </table>
    <hr class="layui-bg-orange">
    <table border="1" class="table" id="workInfo">
        <caption>步态信息</caption>
        <tr>
            <td>平均步宽</td>
            <td>{{step_width}}cm</td>
        </tr>
        <tr>
            <td>步长</td>
            <td>{{step_length}}cm</td>
        </tr>
        <tr>
            <td>步频</td>
            <td>{{step_frequency}}步/分钟</td>
        </tr>
        <tr>
            <td>足角</td>
            <td>{{foot_angle}}</td>
        </tr>
        <tr>
            <td>步幅</td>
            <td>{{step_fudu}}</td>
        </tr>
        <tr>
            <td>步速</td>
            <td>{{step_speed}}m/min</td>
        </tr>
    </table>
</div>
<!--/左侧-->
<!--统计图区域-->
<div id="center">
    <div id="main1"></div>
    <div id="main2"></div>
    <script >
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '每天的步行数'
            },
            xAxis: {
                type: 'category',
                data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [800, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };
        // var app = new Vue({
        //     el:"#main1",
        //    method:{
        //     me1:function () {
        //         option.xAxis.data=['11', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
        //     }
        //    }
        // })


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    //    雷达图
        var myChart2 = echarts.init(document.getElementById('main2'));

        // 指定图表的配置项和数据
        var option2 = {
            title: {
                text: '身体部位运动占比变化',
                subtext: '九月1号大数据统计',
                top: 10,
                left: 10
            },
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(0,0,250,0.2)'
            },
            legend: {
                type: 'scroll',
                bottom: 10,
                data: (function (){
                    var list = [];
                    for (var i = 1; i <=28; i++) {
                        list.push(i + 2000 + '');
                    }
                    return list;
                })()
            },
            visualMap: {
                top: 'middle',
                right: 10,
                color: ['red', 'yellow'],
                calculable: true
            },
            radar: {
                indicator: [
                    { text: '左腿', max: 400},
                    { text: '右腿', max: 400},
                    { text: '左手', max: 400},
                    { text: '右手', max: 400},
                    { text: '腰部', max: 400}
                ]
            },
            series: (function (){
                var series = [];
                for (var i = 1; i <= 28; i++) {
                    series.push({
                        name: '浏览器（数据纯属虚构）',
                        type: 'radar',
                        symbol: 'none',
                        lineStyle: {
                            width: 1
                        },
                        emphasis: {
                            areaStyle: {
                                color: 'rgba(0,250,0,0.3)'
                            }
                        },
                        data: [{
                            value: [
                                (40 - i) * 10,
                                (38 - i) * 4 + 60,
                                i * 5 + 10,
                                i * 9,
                                i * i /2
                            ],
                            name: i + 200 + ''
                        }]
                    });
                }
                return series;
            })()
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2);
    </script>
</div>
<!--右侧区域-->
<div id="right">
  <div id="right_top">
      <img th:src="@{/img/body.jpg}" height="250px" width="530px" border="2">
  </div>
    <div id="right_down">
        <table border="1" class="table" id="coordinate">
            <caption>部位三维坐标</caption>
            <tr>
                <th>部位</th>

                <th>X轴坐标</th>
                <th>Y轴坐标</th>
                <th>Z轴坐标</th>
            </tr>
            <tr>
                <td>头部</td>
                <td>{{head_x}}</td>
                <td>{{head_y}}</td>
                <td>{{head_z}}</td>
            </tr>
            <tr>
                <td>左肩</td>
                <td>{{shoulderleft_x}}</td>
                <td>{{shoulderleft_y}}</td>
                <td>{{shoulderleft_z}}</td>
            </tr>
            <tr>
                <td>左手掌</td>
                <td>{{shoulderright_x}}</td>
                <td>{{shoulderright_y}}</td>
                <td>{{shoulderright_z}}</td>
            </tr>
            <tr>
                <td>右肩</td>
                <td>{{handleft_x}}</td>
                <td>{{handleft_x}}</td>
                <td>{{handleft_y}}</td>
            </tr>
            <tr>
                <td>右手掌</td>
                <td>{{handright_x}}</td>
                <td>{{handright_y}}</td>
                <td>{{handright_z}}</td>
            </tr>
            <tr>
                <td>腰部</td>
                <td>{{waist_x}}</td>
                <td>{{waist_y}}</td>
                <td>{{waist_z}}</td>
            </tr>
            <tr>
                <td>左脚</td>
                <td>{{footleft_x}}</td>
                <td>{{footleft_y}}</td>
                <td>{{footleft_z}}</td>
            </tr>
            <tr>
                <td>右脚</td>
                <td>{{footright_x}}</td>
                <td>{{footright_y}}</td>
                <td>{{footright_z}}</td>
            </tr>
        </table>
    </div>
</div>
<script th:src="@{userinfo.js}"></script>
<script th:src="@{workInfo.js}"></script>
<script th:src="@{coordinate.js}"></script>
</body>
</html>